<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.Iterator" %>
<%@ page import ="com.easyattendance.services.AddSectionService" %>
<%@ page import ="com.easyattendance.model.Section" %>
<%@ page import ="com.easyattendance.services.AddClassService" %>
<%@ page import ="com.easyattendance.model.Class" %>
<%@ page import ="com.easyattendance.services.AddSubjectService" %>
<%@ page import ="com.easyattendance.model.Subject" %>
<html>
<head>
<title>Section - Reports</title>
<jsp:include page="../includeFiles.jsp" ></jsp:include>


<!-- fooTable Links -->
<link href="<%=request.getContextPath()%>/views/css/footable.core.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/views/css/footable.metro.css" rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath()%>/public/js/footable.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/public/js/footable.sort.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function () {
		$('.footable').footable();
	});
</script>

<link rel="stylesheet" href="<%=request.getContextPath()%>/views/css/ui/jquery-ui-1.10.4.custom.min.css">
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.core.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.widget.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.datepicker.js"></script>
<script>
	
	/* $(function(){
		//console.log(fromID);
		$( ".fromDate" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 1,
			dateFormat: 'yy-dd-mm',
			onClose: function( selectedDate ) {
				$( ".toDate" ).datepicker( "option", "minDate", selectedDate );
			}
		});
		$( ".toDate" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 1,
			dateFormat: 'yy-dd-mm',
			onClose: function( selectedDate ) {
				$( ".fromDate" ).datepicker( "option", "maxDate", selectedDate );
			}
		});
	});	
	 */
</script>
</head>

<!--
		Note: Set the body element's class to "left-sidebar" to position the sidebar on the left.
		Set it to "right-sidebar" to, you guessed it, position it on the right.
	-->
<body class="left-sidebar">

<!-- Session check : user logged in or not/ press back button -->
<jsp:include page="../common/checkSession.jsp"></jsp:include>
<jsp:include page="../common/checkSectionRole.jsp" />

<%	String currentUser = (String) session.getAttribute("currentUser"); %>
	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Content -->
		<div id="content">
			<div id="content-inner">
				
				<div id="login_content" style="width: 90%">
				<!-- Generate Report-->
				<header>
					<!-- Select Report Type -->
					<h2>Holidays List</h2>
				</header>
				
					<span class="error_msg">${null_values}</span>
					<span class="error_msg">${holiday_exists}</span>
					<span class="success_msg">${holidays_added}</span>
				
					<form id="set_holidays" name="set_holidays" action="${pageContext.request.contextPath}/AddHolidayListServlet" method="post">
						<table id="table_set_holidays" class="footable metro-attendance">
							<thead>
								<tr>
									<th data-toggle="true" data-sort-ignore="true">Holiday Name</th>
									<th data-toggle="true" data-sort-ignore="true">From</th>
									<th data-toggle="true" data-sort-ignore="true">To</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><input id="holiday" name="holiday" type="text" placeholder="Holiday Name" ></td>
									<td><input id="from" name="from" type="text" class="fromDate" placeholder="From"></td>
									<td><input id="to" name="to" type="text" class="toDate" placeholder="To"></td>
								</tr>
							</tbody>
						</table>
						<input type="hidden" name="section_selected" value="<%=currentUser%>">
						<input type="hidden" name="row_count" id="row_count" value="1">
						<input type="submit" value="Add Holiday" class="button">
					</form>
					<input type="submit" id="add_row" value="" class="add_row_button" alt="Add">
				</div>
				
			</div>
		</div>

		<!-- Sidebar -->
		<div id="sidebar">

			<!-- Sidebar Header - Logo & Name -->
			<jsp:include page="../common/sidebarHeader.jsp" ></jsp:include>

			<jsp:include page="sectionMenu.jsp" />
							
			<!-- Sidebar Footer Content -->
			<jsp:include page="../common/sidebarFooter.jsp" />

		</div>

	</div>
	<script type="text/javascript">
		$(function(){
			$("#setHolidays").addClass("current_page_item");
		});
	</script>
	
<script type="text/javascript">
	$("#add_row").click(function(){
		var table = document.getElementById("table_set_holidays");
		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);
		 
        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "text";
        element1.name="holiday"+rowCount;
        element1.placeholder = "Holiday Name";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name="from"+rowCount;
        element2.id="from"+rowCount;        
        element2.placeholder = "From";        
        cell2.appendChild(element2);

        var cell3 = row.insertCell(2);
        var element3 = document.createElement("input");
        element3.type = "text";
        element3.name = "to"+rowCount;
        element3.id="to"+rowCount;        
        element3.placeholder = "To";
        cell3.appendChild(element3);
		
        element2.className += "fromDate";
        element3.className += "toDate";
        
        $('#row_count').attr("value",rowCount);
        //console.log(rowCount);
        $( ".fromDate" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 1,
			dateFormat: 'yy-dd-mm',
			beforeShowDay: noSunday,
			onClose: function( selectedDate ) {
				$( ".toDate" ).datepicker( "option", "minDate", selectedDate ); 
			}
		});
		$( ".toDate" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 1,
			dateFormat: 'yy-dd-mm',
			beforeShowDay: noSunday,
			onClose: function( selectedDate ) {
				$( ".fromDate" ).datepicker( "option", "maxDate", selectedDate ); 
			}
		});
	});
	function noSunday(date){ 
        return [date.getDay() != 0, ''];
     };
</script>
</body>


</html>